import { Directive, ElementRef, EventEmitter, HostListener, Output } from '@angular/core';

@Directive({
  selector: '[libLibClickOutSide]',
  standalone: true
})
export class LibClickOutSideDirective {
  @Output() libLibClickOutSide = new EventEmitter<MouseEvent>();


  constructor(private el: ElementRef) { }

  @HostListener('document:click', ['$event.target']) onClick(targetElement: EventTarget) {
    const isClickedInside = this.el.nativeElement.contains(targetElement);
    if (!isClickedInside) {
      this.libLibClickOutSide.emit();
    }
  }

}

/*
<div (libLibClickOutSide)="libLibClickOutSide()">
  Click outside of this element to trigger the event.
</div>
*/